{% extends 'base.html' %}
{% block title %}{{ grade.name }}年级{{ semester.school_year }}学年{{ semester.get_name_display }} 日程表管理{% endblock %}

{% block content %}
<script src='{% static "fullcalendar/index.global.min.js" %}'></script>
<script src='{% static "fullcalendar/zh-cn.global.min.js" %}'></script>


<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4>{{ grade.name }}年级{{ semester.school_year }}学年{{ semester.get_name_display }} 日程表管理</h4>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

 <div id='calendar'></div>

<!-- 日程编辑模态框 -->
<div class='modal fade' id='scheduleModal' tabindex='-1' aria-labelledby='scheduleModalLabel' aria-hidden='true'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='scheduleModalLabel'>编辑日程</h5>
        <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
      </div>
      <div class='modal-body'>
        <form id='scheduleForm'>
          <input type='hidden' id='scheduleId' name='id'>
          <input type='hidden' name='grade_id' value='{{ grade.id }}'>
          <div class='mb-3'>
            <label for='scheduleWeekday' class='form-label'>星期几</label>
            <select class='form-select' id='scheduleWeekday' name='weekday' required>
              <option value='1'>周一</option>
              <option value='2'>周二</option>
              <option value='3'>周三</option>
              <option value='4'>周四</option>
              <option value='5'>周五</option>
              <option value='6'>周六</option>
              <option value='7'>周日</option>
            </select>
          </div>
          <div class='mb-3'>
            <label for='scheduleClassSubject' class='form-label'>班级学科</label>
            <select class='form-select' id='scheduleClassSubject' name='class_subject_id' required>
              {% for class_subject in class_subjects %}
              <option value='{{ class_subject.id }}'>{{ class_subject.subject.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class='mb-3'>
            <label for='scheduleTimeSlot' class='form-label'>时间段</label>
            <select class='form-select' id='scheduleTimeSlot' name='time_slot' required>
              <option value='early_morning'>早自习</option>
              <option value='morning'>上午</option>
              <option value='afternoon'>下午</option>
              <option value='evening'>晚自习</option>
            </select>
          </div>
          <div class='mb-3'>
            <label for='schedulePeriod' class='form-label'>节次</label>
            <input type='number' class='form-control' id='schedulePeriod' name='period' min='1' required>
          </div>
          <div class='mb-3'>
            <label for='scheduleStartTime' class='form-label'>开始时间</label>
            <input type='time' class='form-control' id='scheduleStartTime' name='start_time' required>
          </div>
          <div class='mb-3'>
            <label for='scheduleDuration' class='form-label'>持续时间(分钟)</label>
            <input type='number' class='form-control' id='scheduleDuration' name='duration' min='1' required>
          </div>

        </form>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>取消</button>
        <button type='button' class='btn btn-danger' id='deleteSchedule' style='display: none;'>删除</button>
        <button type='button' class='btn btn-primary' id='saveSchedule'>保存</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
        // 将表格数据转换为FullCalendar事件
        var scheduleEvents = [
            {% for schedule in schedules %}
            {
                id: '{{ schedule.id }}',
                title: '{% if schedule.is_class_day == 1 %}正常上课{% elif schedule.is_class_day == 2 %}调休{% elif schedule.is_class_day == 3 %}课后服务{% else %}休息日{% endif %}',
                start: '{{ schedule.date|date:"Y-m-d" }}',
                {% if schedule.is_class_day == 1 %}
                color: 'green',
                {% elif schedule.is_class_day == 2 %}
                color: 'blue',
                {% elif schedule.is_class_day == 3 %}
                color: 'purple',
                {% else %}
                color: 'gray',
                {% endif %}
                allDay: true
            }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];

        var calendarEl = $('#calendar')[0];
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          scrollTime: '07:30:00',
          slotMinTime: '07:30:00',
          slotMaxTime: '22:30:00',
          locale: 'zh-cn',
          events: scheduleEvents.concat([
            {% for event in calendar_events %}
            {
              id: '{{ event.id }}',
              title: '{{ event.title }}',
              start: '{{ event.start }}',
              end: '{{ event.end }}',
              color: '{{ event.color }}',
              textColor: '{{ event.textColor }}',
              
            }{% if not forloop.last %},{% endif %}
            {% endfor %}
          ]),
          headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridYear,dayGridMonth,timeGridWeek,timeGridDay'
          },
          buttonText: {
            today: '今天',
            year: '年',
            month: '月',
            week: '周',
            day: '日'
          },
          // 点击事件时显示编辑模态框
          eventClick: function(info) {
            // 显示事件详情
            alert('事件: ' + info.event.title + '\n日期: ' + info.event.startStr);
          },
          // 日期点击添加事件
          dateClick: function(info) {
            // 清空表单
            $('#scheduleForm')[0].reset();
            $('#scheduleId').val('');
            $('#scheduleModalLabel').text('添加课程');
            $('#scheduleDate').val(info.dateStr);
            $('#deleteSchedule').hide();
            $('#scheduleModal').modal('show');
          }
        });
        calendar.render();
        
        
        
        
        
        // 获取CSRF Token的辅助函数
        function getCookie(name) {
          let cookieValue = null;
          if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
              const cookie = cookies[i].trim();
              // Does this cookie string begin with the name we want?
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
              }
            }
          }
          return cookieValue;
        }
      });

</script>
{% endblock %}